<!--无限极左侧菜单-->
<div class="left-menu-panel">
    <div class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">分类浏览</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">我的最近浏览</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">空缺Vacant</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">Offerd</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">开票Billed</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">完成Filled</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">取消Canceled</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">订单收藏夹</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">目前重要订单</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">开发中客户订单</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">自己主做订单</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">订单搜索器</a>
        </li>
    </div>
</div>
<div class="right-panel layuimini-page-anim">
    <form class="layui-form layui-user-from" action="">
        <div class="layui-row">
            <div class="layui-col-md3 layui-col-sm12">
                <div class="layui-form-item">
                    <label class="layui-form-label">订单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="ordername" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">公司</label>
                    <div class="layui-input-block">
                        <input type="text" name="company" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="status">
                            <option value=""></option>
                            <option value="0">下拉框</option>
                            <option value="1">下拉框</option>
                            <option value="2">下拉框</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">时间点</label>
                    <div class="layui-input-block">
                        <select name="time">
                            <option value=""></option>
                            <option value="0">下拉框</option>
                            <option value="1">下拉框</option>
                            <option value="2">下拉框</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">订单负责人</label>
                    <div class="layui-input-block">
                        <input type="text" name="director" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户</label>
                    <div class="layui-input-block layui-input-space5">
                        <div class="layui-col-md6">
                            <select name="user">
                                <option value=""></option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                        <div class="layui-col-md6">
                            <select name="role">
                                <option value="">任意角色</option>
                                <option value="0">下拉框</option>
                                <option value="1">下拉框</option>
                                <option value="2">下拉框</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">建单日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="dateRange" id="dateRange" placeholder="请选择建单日期范围" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">职能</label>
                    <div class="layui-input-block">
                        <select name="position">
                            <option value=""></option>
                            <option value="0">下拉框</option>
                            <option value="1">下拉框</option>
                            <option value="2">下拉框</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-bg-lightblue" lay-submit lay-filter="formDemo">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">清空</button>
                    </div>
                </div>
            </div>

        </div>
    </form>
    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter" lay-skin="line"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="getCheckData">加入收藏</button>
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="getCheckLength"><i class="fa fa-th-large"></i> 更多功能</button>
    </div>
</script>

<script type="text/html" id="statusTableBar">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-xs layui-bg-orange">空缺Vacant</button>
    {{#  } }}
    {{#  if(d.status == 1){ }}
    <button class="layui-btn layui-btn-xs">取消Cancelled</button>
    {{#  } }}
    {{#  if(d.status == 2){ }}
    <button class="layui-btn layui-btn-xs layui-bg-red">完成Filled</button>
    {{#  } }}
    {{#  if(d.status == 3){ }}
    <button class="layui-btn layui-btn-xs layui-bg-black">Unfilled</button>
    {{#  } }}
</script>

<script>
    layui.use(['layer','form', 'table','miniPage','element', 'laydate'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            laydate = layui.laydate;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        /**
         * 日期范围
         **/
        laydate.render({
            elem: '#dateRange'
            ,range: true
        });

        /**
         * 数据快速查看
         **/
        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: [],
            skin: 'line',
            cols: [[
                {type:'checkbox', fixed: 'left'},
                {field: 'id', align:'center', title: 'ID', minWidth: 200, templet: function(d){
                        return '<a href="javascript:;" class="mr-10"><i class="fa fa-paperclip"></i> 0</a> ' +
                            '<a href="javascript:;" class="mr-20"><i class="fa fa-comment-o"></i> 0</a>' +
                            '<span>'+ d.id +'</span>'
                }},
                {field: 'nibpid', align:'center', Width: 60, title: 'NIBPID'},
                {field: 'ordername', title: '订单名称', minWidth: 150, templet: function(d){
                    return '<a href="javascrpt:;" layuimini-href="'+ d.url +'" class="color-blue">'+ d.ordername +'</a>'
                }},
                {field: 'companyname', title: '公司名称', minWidth: 200, templet: function(d){
                    return '<a href="javascrpt:;" class="color-blue">'+ d.companyname +'</a>'
                }},
                {field: 'city', align:'center', Width: 60, title: '城市'},
                {field: 'director', title: '订单负责人', minWidth: 150, templet: function(d){
                    return '<a href="javascrpt:;" class="color-blue">'+ d.director +'</a>'
                }},
                {field: 'number', align:'center', Width: 60, title: '招聘数量'},
                {field: 'candidates', align:'center', Width: 60, title: '人选'},
                {field: 'interview', align:'center', Width: 60, title: '面试'},
                {field: 'offer', align:'center', Width: 60, title: 'Offer'},
                {field: 'status', minWidth: 100, title: '状态', templet: '#statusTableBar'},
                {field: 'date', minWidth: 100, title: '创建日期'},
                {title: '操作', Width: 60, fixed: "right", align: "center", templet: function(d){
                    return '<button class="layui-btn layui-btn-xs layui-btn-primary"><i class="fa fa-align-justify"></i></span>';
                }}
            ]],
            page: true
        });

    });
</script>
